<template>
    <div class="container">
        <div class="line" @click="isshow = !isshow">
            <div :key="history_today.nodes.code" class="node">
                {{ history_today.nodes.code }}
            </div>
        </div>

        <div class="data" v-show="isshow">
            <div class="data-item" v-for="item in history_today.selectedNodes" :key="item.date">
                <a :href="'https://www.bing.com/search?q='+item.title" style="color: black; text-decoration: none;" target="_blank">
                    <div class="date">{{ item.date }}</div>
                    <div class="title">{{ item.title }}</div>
                </a>
            </div>
        </div>
    </div>
</template>
  
<script setup lang="ts">

import { onMounted, ref } from 'vue';
import { getHistoryToday } from '../api/outapi';
const isshow = ref(false)
const history_today = ref<{
    nodes: {
        code: number;
        day: string;
    };
    selectedNodes: { date: string; title: string }[];
}>({
    nodes: {
        code: 0,
        day: '',
    },
    selectedNodes: [],
});
// 初始化历史今日
async function gethistory() {
    await getHistoryToday().then(res => {
        history_today.value.nodes.code = res.code
        history_today.value.nodes.day = res.day
        history_today.value.selectedNodes = res.result
    })
}
onMounted(() => {
    gethistory()
})

</script>
  
<style>
.container {
    display: flex;
    align-items: center;
    height: calc(100vh - 160px);
    /* 计算高度为视窗高度减去上下各 80px */
    padding-top: 0px;
    /* 上方留出 80px 空间 */
    padding-bottom: 0px;
    /* 下方留出 80px 空间 */
    z-index: 0;
}

.line {
    position: relative;
    width: 5px;
    height: 100%;
    background-color: #000;
    cursor: pointer;
}

.node {
    position: absolute;
    top: 50%;
    left: -5px;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #000;
    color: #fff;
    font-size: 10px;
    text-align: center;
    line-height: 10px;
    cursor: pointer;
}

.data {
    margin-left: 20px;
}

.date {
    font-weight: bold;
    opacity: 0.3;
}

.title {
    margin-bottom: 10px;
    opacity: 0.3;
}

.data-item {
    margin-bottom: 10px;
}

.data-item:hover .date,
.data-item:hover .title {
    opacity: 1;
}

.data-item {
    cursor: pointer;
}</style>
  